<template>
  <div class="d-sider">
    <Sider
      :collapsed-width="200"
      collapsible
      v-model="isCollapsed"
    >
      <div class="logo">
        <div>老王笔记后台管理系统</div>
        <!-- <div>王</div> -->
      </div>
      <Menu
        :theme="themeColor"
        width="auto"
        :open-names="['article']"
        accordion
      >
        <MenuItem name="home">
          <Icon type="document-text"></Icon>
          首页
        </MenuItem>
        <Submenu name="article">
          <template slot="title">
            <Icon type="ios-paper"></Icon>
            内容管理
          </template>
          <MenuItem name="articlePublish">发布文章</MenuItem>
        </Submenu>
      </Menu>
    </Sider>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isCollapsed: true,
      themeColor: 'dark'
    }
  }
}
</script>

<style lang="scss">
  @import './SiderBar.scss'
</style>
